<template>
  <div>
    <!--    <h1>问题管理</h1>-->
    <template>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            label="用户"
            width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </template>
        </el-table-column>

        <el-table-column
            label="收藏内容"
            width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="right">
              <div v-for="blog in scope.row.blogs">
                <p> {{ blog.title }}</p>
                <el-divider></el-divider>
              </div>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">博客详情</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>


        <el-table-column
            label="是否展示"
            width="180">
          <template slot-scope="scope">
            <span v-show="scope.row.isPass == 0" style="margin-left: 10px">未展示</span>
            <span v-show="scope.row.isPass == 1" style="margin-left: 10px">已展示</span>
          </template>
        </el-table-column>

        <el-table-column label="操作"
                         align="right">
          <template slot-scope="scope">
            <el-button
                v-show="scope.row.isPass == 0"
                size="mini"
                type="primary"
                @click="handlePass(scope.row.hcid)">通过
            </el-button>
            <el-button
                v-show="scope.row.isPass == 1"
                size="mini"
                type="danger"
                @click="handlePass(scope.row.hcid)">取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--&lt;!&ndash;    <el-pagination class="mpage"&ndash;&gt;-->
    <!--&lt;!&ndash;                   background&ndash;&gt;-->
    <!--&lt;!&ndash;                   layout="prev, pager, next"&ndash;&gt;-->
    <!--&lt;!&ndash;                   :current-page="currentPage"&ndash;&gt;-->
    <!--&lt;!&ndash;                   :page-size="pageSize"&ndash;&gt;-->
    <!--&lt;!&ndash;                   :total="total"&ndash;&gt;-->
    <!--&lt;!&ndash;                   @current-change=page>&ndash;&gt;-->
    <!--&lt;!&ndash;    </el-pagination>&ndash;&gt;-->
  </div>

</template>

<script>
export default {
  inject: ["reload"],
  name: "collectionsManage",
  data() {
    return {
      tableData: [],
      // currentPage: 1,
      // total: 0,
      // pageSize: 10
    }
  },
  methods: {
    handlePass(hcid) {
      this.$axios.post('/passCollection?hcid=' + hcid, {
            headers: {
              "Authorization": localStorage.getItem("token")
            }
          }
      ).then(res => {
        this.reload()
      })

    },
  },
  created() {
    // this.page(1);

    this.$axios.get("/getHotCollectionsByAdmin").then(res => {
      this.tableData = res.data.data
    })
  }
}
</script>

<style scoped>
.mpage {
  margin: 0 auto;
  text-align: center;
}
</style>